<template>
  <div class="bg-grid" v-show="grade"></div>
  <template v-for="(item, index) in asideChildren" :key="index">
    <Vue3DraggableResizable
      :key="item.id"
      :scale="1"
      :x="item.styles?.x"
      :y="item.styles?.y"
      :active="active"
      :draggable="!item.fartherLock && !item.lock"
      :resizable="true"
      :parent="true"
      :class="{
        'checked-div':
          checkMoreCompoList.map((el) => el.id).includes(item.id)
      }"
      @click="handleCtrlMore(item, index)"
      @activated="() => handleCurrentCompo('activated', item.id)"
      @deactivated="print('deactivated')"
      @drag-start="handleDragStart({ x, y })"
      @dragging="print('dragging')"
      @drag-end="({ x, y }) => handleDragend({ x, y, id: item.id })"
      @resize-start="print({ x, y, w, h })"
      @resizing="print('resizing')"
      @resize-end="
        ({ x, y, w, h }) => handleResizeEnd({ x, y, w, h, id: item.id })
      "
      @dblclick="handleItemDbClick(item)"
      v-if="item.show && item.type !== 'group'"
    >
      <widget-view :value="item" />
    </Vue3DraggableResizable>

    <template v-if="item.children && item.show">
      <child-item :asideChildren="item.children"></child-item>
    </template>
  </template>
  <!-- 组件配置 -->
  <bi-drawer
    class="component-config"
    v-model:drawer="configDrawer"
    direction="rtl"
    :show-close="false"
  >
    <template #header>
      <h3>
        {{ `${currentComponents.label}配置` }}
      </h3>
    </template>

    <component-config
      :value="currentComponents"
      @update-list="handleComponentChangeUpdateList"
      v-if="configDrawer"
    />
  </bi-drawer>
</template>

<script>
import ComponentConfig from "./component-config";
import Vue3DraggableResizable from "vue3-draggable-resizable";
import { DraggableContainer } from "vue3-draggable-resizable";
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
import WidgetView from "../widget-view.vue";
import { getIdAndEditIt } from "@/utils/common";
import { ref, toRefs } from "vue";
import useComponentConfig from "@/views/design-center/store/component-config";
const useComponentConfigStore = useComponentConfig();
const { pageConfig, currentCompoId, checkMoreCompoList } = toRefs(
  useComponentConfigStore
);
import { useCheckMore } from "@/hooks/use-check-more";
export default {
  name: "ChildItem",
  components: {
    Vue3DraggableResizable,
    WidgetView,
    ComponentConfig,
    DraggableContainer,
  },
  props: {
    asideChildren: Array,
  },

  setup() {
    const { isCtrl, handleCtrlMore } = useCheckMore();
    const grade = ref(false);
    const activeId = ref(""); //高亮组件的id
    const active = ref(false); //当前组件是否高亮
    const configDrawer = ref(false); //是否展示组件配置抽屉
    const currentComponents = ref({});
    const handleCurrentCompo = (a, keyId) => {
      console.log("当前高亮选中的组件", a, keyId);
      activeId.value = keyId;
      currentCompoId.value = keyId;
    };
    const print = (val) => {
      // console.log(val);
    };
    const handleDragend = ({ x, y, id }) => {
      // console.log('index-------', id, x, y, pageConfig.value.list, { x, y });
      grade.value = false;
      getIdAndEditIt(pageConfig.value.list, id, "styles", { x, y });
    };
    const handleResizeEnd = ({ x, y, w, h, id }) => {
      console.log("放大缩小后的id", id);
      getIdAndEditIt(pageConfig.value.list, id, "styles", { x, y, w, h });
    };
    const handleItemDbClick = (val) => {
      console.log("当前组件点击了", val);
      configDrawer.value = true;
      currentComponents.value = val;
    };

    /**
     * @description: 组件配置项修改后更新list
     * @param {*} value
     * @return {*}
     */
    const handleComponentChangeUpdateList = (id, key, formData) => {
      console.log(
        "组件配置后统一更新位置---------",
        id,
        key,
        formData,
        useComponentConfigStore.pageConfig.list.value
      );
      getIdAndEditIt(pageConfig.value.list, id, key, formData);
      // console.log(pageConfig.value.list, 6666666666);
    };

    /**
     * @description:拖拽开始
     * @return {*}
     */
    const handleDragStart = () => {
      grade.value = true;
    };
    return {
      isCtrl,
      checkMoreCompoList,
      handleCtrlMore,
      grade,
      active,
      activeId,
      currentCompoId,
      print,
      configDrawer,
      currentComponents,
      handleDragStart,
      handleDragend,
      handleResizeEnd,
      handleItemDbClick,
      handleCurrentCompo,
      handleComponentChangeUpdateList,
    };
  },
};
</script>
<style scoped lang="scss">
.bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 30px 30px, 30px 30px;
  background-image: linear-gradient(hsl(212, 95%, 59%, 0.3) 1px, transparent 0),
    linear-gradient(90deg, hsl(212, 95%, 59%, 0.3) 1px, transparent 0);
  // z-index: 2;
}

.vdr-container {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  // border: 0.01rem solid green;
  // background: #fff;
  background: transparent;

  &:hover {
    cursor: move;
  }
}

// .vdr-handle {
//     display: block !important;
//     width: 4px;
//     height: 4px;
//     border: 1px solid #ccc;
// }
.vdr-container.active {
  // border-color: #fff;
  // border-style: none;
  // border: none;
  // border-color: transparent;
  border: 0.01rem solid #ccc;
}

.checked-div {
  background: rgb(216, 130, 0);
  border: 0.02rem solid rgb(216, 130, 0);
}
</style>
